<template>
  <div class="main">
    <div class="head">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="奖项名称">
          <div class="head-input">
            <el-input v-model="formInline.title" placeholder="输入姓名或者学号"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="学生姓名">
          <div class="head-input">
            <el-input v-model="formInline.userName" placeholder="输入姓名或者学号"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="奖项目前进度">
          <el-select v-model="formInline.status" placeholder="请选择奖项目前进度">
            <el-option label="未申请" value="未申请" />
            <el-option label="已申请" value="已申请" />
            <el-option label="未答辩" value="未答辩" />
            <el-option label="已答辩" value="已答辩" />
            <el-option label="已出结果" value="已出结果" />
          </el-select>
        </el-form-item>
        <el-form-item label="奖项目前结果">
          <el-select v-model="formInline.result" placeholder="请选择奖项目前结果">
            <el-option label="无结果" value="无结果" />
            <el-option label="未通过" value="未通过" />
            <el-option label="已通过" value="已通过" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="body">
      <el-table v-if="tableData.length > 0"
                :data="tableData"
                height="510"
                border
                highlight-current-row
                @current-change="toAwardDetails"
                @cell-dblclick="toAwardDetails"
                style="width: 90%;cursor: pointer"
      >
        <el-table-column prop="studentAwardsId" label="学生奖项Id" />
        <el-table-column prop="awardId" label="奖项Id" />
        <el-table-column prop="title" label="奖项名称"  />
        <el-table-column prop="username" label="学生姓名" ></el-table-column>
        <el-table-column label="进度" >
          <template #default="scope">
            <el-tag :type="changeColor(scope.row.status)">{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="当前结果">
          <template #default="scope">
            <el-tag :type="changeColor(scope.row.result)">{{scope.row.result}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="管理员审核" >
          <template #default="scope">
            <View id="checkbox" style="width: 2em; height: 2em;margin-left: 20px" @click="queryCheck(scope.row)" color="#409EFC"/>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="foot">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="paginations.page_index"
                     :page-sizes="paginations.page_sizes"
                     :page-size="paginations.page_size"
                     :layout="paginations.layout"
                     :total="paginations.total">
      </el-pagination>
    </div>
<!--    查看奖项审核状态-->
    <el-dialog
        v-model="checkFlag"
        title="奖项申请的终审状态"
        width="30%"
    >
      <h2 style="color: #4b7fb7">终审状态(管理员)：{{this.currentCheckStatus}}</h2>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="checkFlag = false">关闭</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import {SelectAllStudentAwardByInfo, SelectAllStudentAwardByTeacherId} from "../../api/studentAwards";
import {queryCheckStatusByStudentAwardsId} from "../../api/check";
import {View} from "@element-plus/icons-vue";

export default {
  name: "Teacher",
  components: {View},
  data() {
    return {
      formInline:{
        userName:'全部学生',
        status:'全部进度',
        result:'全部结果',
        title:'全部奖项',
      },
      paginations: {
        page_index: 1, //当前页面
        total: 0,      //总页数
        page_size: 5,  //每页显示的记录条数
        page_sizes: [5, 10, 15, 20],  //可选择的page_size范围
        layout: "total, sizes, prev, pager, next, jumper"  //翻页属性
      },
      tableData: [],
      allTableData: [],
      checkFlag:false,//查看审核状态变量
      currentCheckStatus:'',//当前选中学生奖项审核状态
      replaceFlag:true,//转跳标志
    };
  },
  created() {
    this.getProfile();
  },
  methods: {
    getProfile() {
      SelectAllStudentAwardByTeacherId(this.$store.state.user.id).then(response=>{
        this.allTableData = response.data
        this.setPaginations();
      })
    },
    changeColor(result){
      if (result==="未通过")
      {
        return 'danger';
      }else if((result === '通过')||(result === '已出结果'))
      {
        return 'success';
      }else if((result === '无结果')||(result === '未申请'))
      {
        return 'info';
      }else {
        return 'warning';
      }
    },
    //查询通过表单
    onSubmit(){
      if(this.formInline.userName === '')
      {
        this.formInline.userName = '全部学生';
      }
      if(this.formInline.status === '')
      {
        this.formInline.status = '全部进度';
      }
      if(this.formInline.result === '')
      {
        this.formInline.result = '全部结果';
      }
      if(this.formInline.title === '')
      {
        this.formInline.title = '全部奖项';
      }
      SelectAllStudentAwardByInfo(this.$store.state.user.id,this.formInline.title,this.formInline.userName,this.formInline.status,this.formInline.result).then(response=>{
        this.allTableData = response.data
        this.setPaginations();
      })
    },
    handleSizeChange(page_size) {
      this.paginations.page_index = 1;
      this.paginations.page_size = page_size;
      this.tableData = this.allTableData.filter((item, index) => {
        return index < page_size;
      });
    },
    handleCurrentChange(page) {
      this.paginations.page_index =page;
      let index = this.paginations.page_size * (page - 1);
      let nums = this.paginations.page_size * page;
      let tables = [];   // 存储跳转页面要显示的记录

      for (let i = index; i < nums; i++) {
        if (this.allTableData[i]) {
          tables.push(this.allTableData[i]);
        }
        this.tableData = tables;
      }
    },
    setPaginations() {
      this.paginations.total = this.allTableData.length;
      this.paginations.page_index = 1;
      this.paginations.page_size = 5;
      //设置默认的分页数据
      this.tableData = this.allTableData.filter((item, index) => {
        return index < this.paginations.page_size;
      });
    },
    toAwardDetails(currentRow){
      if(this.replaceFlag === false)
      {
        return
      }
      this.$router.replace({path: '/Teacher/examine', query:{awardId:currentRow.awardId,studentAwardsId:currentRow.studentAwardsId}})
    },
    //查询当前奖项管理员审核情况
    queryCheck(row){
      this.replaceFlag = false;
      queryCheckStatusByStudentAwardsId(row.studentAwardsId).then(res => {
        this.currentCheckStatus = res.data;
        this.checkFlag=true;
        this.replaceFlag = true;
      })
    }
  }
}

</script>
<style scoped>
.main {
  display: flex;
  flex-direction: column;
}
.head{
  margin-top: 20px;
}
.body {
  display: flex;
  justify-content: center;
}
</style>
